<template>
  <div>
    <el-row :gutter="20">
      <el-col>
        <el-select
          v-model="value"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col>
        <div id="container"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: "",
      value: "",
      loading: false,
      options: [],
      marker: "",
      placeSearch: "",
    };
  },
  methods: {
    mapWay() {
      var _this = this;
      _this.map = new AMap.Map("container", {
        zoom: 14, //级别
        center: [113.658091, 34.746255], //中心点坐标
        viewMode: "3D", //使用3D视图
        resizeEnable: true,
      });
      AMap.plugin(["AMap.ToolBar", "AMap.PlaceSearch"], function () {
        var autoOptions = {
          city: "全国",
        };
        _this.placeSearch = new AMap.PlaceSearch(autoOptions);
        var toolbar = new AMap.ToolBar();
        _this.map.addControl(toolbar);
        _this.map.addControl(_this.placeSearch);
      });
      _this.map.on("click", function (e) {
        // console.log();
        addMarker([e.lnglat.lng, e.lnglat.lat]);
      });
      _this.remoteMethod("");
      function addMarker(m) {
        if (_this.marker) {
          _this.map.remove(_this.marker);
        }
        _this.marker = new AMap.Marker({
          icon: new AMap.Icon({
            size: new AMap.Size(20, 30),
            image:
              "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            imageSize: new AMap.Size(20, 30),
          }),
          position: m,
          offset: new AMap.Pixel(-10, -30),
        });
        _this.map.add(_this.marker);
      }
    },
    remoteMethod(query) {
      // console.log(this.placeSearch);
      // return;
      var keywords = "北京大学";
      this.placeSearch.search(keywords, function (status, result) {
        // 搜索成功时，result即是对应的匹配数据
        console.log(status);
        console.log(result);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 50vh;
}
</style>